<template>
	<view class="u-page">
	        <view class="u-demo-block__content">
	            <view class="u-demo-block__content">
	                <u-row customStyle="margin-bottom: 10px">
	                    <u-col span="8">
	                        <view class="div1">
								<view class="div2">
									{{patient.name}}
									<u-tag v-bind:text="patient.relation"  shape="circle" class="tag1"></u-tag><br>
									{{patient.number}}
								</view>
								<view style="width: 130rpx;height: 50rpx;float: right;font-size: 4rpx;" @click="cutShow()">
									<view style="width: 50rpx;height: 50rpx;background-color: #000000;margin: 0 auto;"></view>
									切换就诊人
								</view>
							</view>
	                    </u-col>
	                </u-row>
	            </view>
				<view class="div3">
					<view style="float: left;display: inline-block;">卡内余额</view>
					<view style="float: right;display: inline-block;">￥{{yuE}}</view>
				</view>
				<view style="font-family: 等线;margin: 20px;font-size: 40rpx;margin-top:35px">
					在线充值
				</view>
				
				<view class="u-demo-block__content">

						<view class="div4" :class="{toBlue:currentIndex==index}" v-for="p,index in pays" @click="checkBoxForPay(p,index)">
							<view v-if="p!='自定义'">{{p}}</view>
							<view v-if="p=='自定义'">
								<view v-show="!otherPayClick">自定义</view>
								<view v-show="otherPayClick"><u--input v-model="pay" border="none"></u--input></view>
							</view>
						</view>

				</view>
				<u-keyboard mode="number" :dotDisabled="payKeyboardShow"></u-keyboard>
				
				<view class="div5">充值记录</view>
				<view class="div6">
					<u-button type="primary" text="确定" @click="saveMoney()"></u-button>
				</view>
	        </view>
			<!-- 切换就诊人弹出框 -->
				<u-popup  ref="popup" :show="isCut" mode="bottom" @close="cutDate" class="homepage">
					<view class="popopBox">
						<scroll-view
							scroll-y="true"
							style="height: 50rpx;"
							scroll-with-animation="true"
						>
						</scroll-view>
						<view @click="cutPatient(patient)" class="flex-row wrapper" v-for="patient in patients" style="margin: 20rpx 5rpx;
			padding: 10rpx;background-color: #E5E5E5;">
							<view class="flex-col flex-row wraper-col">
								<view class="flex-row box">
									<view style="float: left;margin-right: 10rpx;">{{patient.name}}</view>
									<view style="padding: 5rpx 15rpx;background-color: #3289FF;display: inline-block;border-radius: 10rpx;">
										<view style="">{{patient.relation}}</view>
									</view>
								</view>
								<view class="u-line-1 text-three">{{patient.number}}</view>
							</view>
						</view>
					</view>
				</u-popup>
	    </view>
</template>

<script>
	import {msg} from '@/utils/utils.js'
	import request from '@/utils/requestConfig.js'
	export default{
		data(){
			return{
				isCut:false,
				patient:{},
				patients:[],
				userId:uni.getStorageSync('user').id,
				name:"小明",
				shenfen:"你爹",
				number:"123456******134",
				yuE:60.00,
				pays:[50,100,200,500,1000,'自定义'],
				pay:0,
				otherPayClick:false,
				currentIndex:-1,
				payKeyboardShow:false
			}
		},
		created(){
			
			this.findPatientByUserId()
			
		},
		methods:{
			cutShow(){
				this.isCut=!this.isCut
				this.qie()
			},
			cutDate(){
				this.isCut=!this.isCut
				this.qie()
			},
			cutPatient(patient){
				this.patient=patient
				this.isCut=!this.isCut
				this.qie()
			},
			qie(){
				this.checkBalance()
				console.log("切换就诊人")
			},
			checkBoxForPay(row,index){
				this.currentIndex=index
				console.log(row)
				if(row=="自定义"){
					console.log("弹出")
					this.otherPayClick=true
					this.toPay()
				}else{
					this.pay=row
				}
			},
			toPay(){
				this.payKeyboardShow=true
			},
			closePay(){
				this.payKeyboardShow=false;
			},
			/* 查看余额 */
			checkBalance(){
				request.post('/user/user/patient-card/getBlaceByUserId',{userId:this.userId,hospitalNumber:this.patient.hospitalNumber},false).then((res)=>{
					uni.hideLoading();
					this.yuE=(res.data.balance).toFixed(2)
				}).catch((error)=>{
					console.log(error)
				})
			},
			/* 存钱 */
			saveMoney(){
				if(this.pay<=10){
					msg('至少存10元',3000)
					return;
				}
				request.post('/user/user/patient-card/saveMoney',{userId:this.userId,money:this.pay,patientId:this.patient.id,hospitalNumber:this.patient.hospitalNumber},false).then((res)=>{
					uni.hideLoading();
					msg("存取成功",3000);
				}).catch((error)=>{
					
					console.log(error)
				})
			},
			/* 获取当前登录用户的病人列表 */
			findPatientByUserId(){
				alert("就诊人id"+this.userId)
				request.post('/user/user/the-patient/findPatientByUserId',{userId:this.userId},false).then((res)=>{
					
					let tagList=res.data.thePatientList
					this.patients=tagList
					for(let i=0;i<tagList.length;i++){
						let tag=tagList[i]
						if(tag.defaultPerson=="是"){
							this.patient=tag
							//alert(this.patient.hospitalNumber)
							this.checkBalance()
							// console.error(this.patient)
						}
					}
					
					uni.hideLoading();
				}).catch((error)=>{
					
					console.log(error)
				})
			}
		}
	}
</script>

<style scoped>
.div1{
	width:600rpx;
	background-color: #f3f8ff;
	border:f4f4f5 solid 1rpx;
	border-radius: 15px;
	margin-left:10px;
	margin-top:10px;
	padding: 50rpx;
}
.div2{
	color: #b1b2b4;
	float: left;
}
.div3{
	height: 50rpx;
	width:620rpx;
	margin-left:10px;
	margin-top:20px;
	padding: 20px;
	border:f4f4f5 solid 1rpx;
	border-radius: 6px;
	box-shadow: #bebfc1 1rpx 1rpx 20rpx;
}
.div4{
	background-color: #f2f2f2;
	text-align: center;
	width: 220rpx;
	height: 80rpx;
	line-height: 80rpx;
	display: inline-block;
	margin: 12rpx;
}
.div5{
	color: #007AFF;
	float: right;
	margin-top: 35rpx;
	margin-right: 45rpx;
	font-size: 30rpx;
}
.div6{
	width: 90%;
	margin: 50rpx 5%;
	padding-top:90rpx;
}
.toBlue{
	background-color: #007AFF;
}
.tag1{
	display: inline-block;
	color: #3289ff;
	margin-left: 10px;
	
	/* background-color: #3289ff; */
}

.wrap {
        padding: 12px;
    }

    .demo-layout {
        height: 25px;
        border-radius: 4px;
    }

    .bg-purple {
        background: #CED7E1;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }
	
</style>
